<script setup lang="ts">
import { type PropType, type VNode } from "vue";
import { Modal } from "ant-design-vue";

defineOptions({ name: "confirm-button" });
const props = defineProps({
  type: { type: String as PropType<"default" | "primary" | "text" | "dashed" | "link" | "ghost"> },
  size: { type: String as PropType<"large" | "middle" | "small"> },
  shape: { type: String as PropType<"default" | "circle" | "round"> },
  icon: { type: Object as PropType<VNode> },
  htmlType: { type: String },
  disabled: { type: Boolean },
  block: { type: Boolean },
  danger: { type: Boolean },
  loading: { type: Boolean },
  prevent: { type: Boolean, default: false },
  stop: { type: Boolean, default: false },

  title: { type: String },
  content: { type: String },
  confirmCb: { type: Function as PropType<(...args: any[]) => any> },
  cancelCb: { type: Function as PropType<(...args: any[]) => any> },
});

const emits = defineEmits({
  ok: () => true,
  cancel: () => true,
});

const onClick = async (e: PointerEvent) => {
  if (props.prevent) e.preventDefault();
  if (props.stop) e.stopPropagation();
  Modal.confirm({
    centered: true,
    title: props.title || "提示",
    content: props.content,
    onOk: (...args: any[]) => {
      emits("ok");
      return props.confirmCb?.(...args);
    },
    onCancel: (...args: any[]) => {
      emits("cancel");
      return props.cancelCb?.(...args);
    },
  });
};
</script>

<template>
  <a-button
    :type="type"
    :size="size"
    :danger="danger"
    :icon="icon"
    :shape="shape"
    :html-type="htmlType"
    :loading="loading"
    :disabled="disabled"
    @click="onClick"
  >
    <slot />
  </a-button>
</template>
